<template>
  <ul class="account-language-switch-list">
    <li :key="index" v-for="(language, key, index) of languages">
      <a
        v-if="language.name != currentLanguage.name"
        href="javascript:void();"
        :title="language.displayName"
        @click="changeLanguage(language.name)"
      >
        <i :class="language.icon"></i>
      </a>
    </li>
  </ul>
</template>

<script lang="ts">
  import * as _ from 'lodash';
  import { abpService } from '/@/shared/abp';
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'account-languages',
    computed: {
      languages: () => {
        return _.filter(abpService.abp.localization.languages, (l) => !l.isDisabled);
      },
      currentLanguage: () => {
        return abpService.abp.localization.currentLanguage;
      },
    },
    methods: {
      /** 切换当前语言 */
      changeLanguage(languageName) {
        abpService.abp.utils.setCookieValue(
          'Abp.Localization.CultureName',
          languageName,
          new Date(new Date().getTime() + 5 * 365 * 86400000), // 5 year
          abp.appPath,
        );

        window.location.reload();
      },
    },
  });
</script>

<style lang="less" scoped>
  @import './account-languages.less';
</style>
